<html>  <head>    <title>Dojo: Hello World!</title>        <style type="text/css">
	@import "./dojo-release-1.0.0/dojo/resources/dojo.css";
	@import "./dojo-release-1.0.0/dijit/themes/tundra/tundra.css";
	@import "./dojo-release-1.0.0/dojox/widget/SortList/SortList.css";
	</style>	  </head><script type="text/javascript" src="./dojo-release-1.0.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">    dojo.require("dojo.parser");
	dojo.require("dijit.Dialog");
	dojo.require("dijit.form.Button");
    dojo.require("dijit.Toolbar");
	dojo.require("dijit.layout.TabContainer");	dojo.require("dijit.layout.StackContainer");    dojo.require("dijit.layout.SplitContainer");
	dojo.require("dijit.layout.LayoutContainer");    dojo.require("dijit.layout.ContentPane");    dojo.require("dijit.layout.AccordionContainer");
	dojo.require("dojox.widget.SortList");
	dojo.require("dojo.data.ItemFileWriteStore");
	dojo.require("dijit.Declaration");
    dojo.require("dijit.Editor");
    dojo.require("dijit._editor.plugins.LinkDialog");
    
    	// Global var for new mail pane
    	var paneId=1;

	function MoveItemDown(){
		console.debug("Inside MoveItemDown");
		console.debug(this);
		var PreviewKids = mainContent.getChildren();
		var MyParentId = this.containerNode.offsetParent.id;
		var IsFound = -1;		
		var SavedKids = new Array();

		// Save all nodes from myself and down
		for(var i=0; i<length(PreviewKids); i++){
			if(PreviewKids[i] == MyParentId){
				console.debug("--Match found");
				IsFound = i;
			}
			if(IsFound > (-1)){
				SavedKids[i-IsFound] = PreviewKids[i];
			}
		}

		// Delete all nodes from myself and down
		for(var j=0; j<length(SavedKids); j++){
			console.debug(SavedKids[j]);
			mainContent.removeChild(SavedKids[j]);
		}

		// Swap current node with node below it
		mainContent.addChild(SavedKids[1]);
		mainContent.addChild(SavedKids[0]);
		// Add all other nodes accordingly
		for(var k=2; k<length(SavedKids); k++){
			mainContent.addChild(SavedKids[k]);		
		}

		console.debug("--length(SavedKids) = "+length(SavedKids));
	}

	// Function deletes current container object
	function RemoveItem(){
		console.debug("Inside RemoveObject");
		console.debug(this);
		console.debug(this.containerNode.offsetParent.id);
		
		var handle = dijit.byId(this.containerNode.offsetParent.id);
		mainContent.removeChild(handle);
		
		console.debug(this.containerNode);	
	}	

	function AddItem() {
		var newTab = new obj.NewItem({id: "new"+paneId  }).container;	    
		console.debug(newTab);	
		//dojo.mixin(newTab, {title: "New Message #" + paneId++});
		dojo.mixin(newTab, {title: "New Message #" + paneId++});

		var MyKids = newTab.getChildren();
		console.debug(MyKids[0]);
		console.debug(MyKids[0].label);
		MyKids[0].label = "Move Down"+paneId;

		paneId++;		

	    	mainContent.addChild(newTab);
					
/*
	    var ni = document.getElementById('mainPageDiv');
        var numi = document.getElementById('theValue');
        var num = (document.getElementById('theValue').value -1)+ 2;
        numi.value = num;
        var newdiv = document.createElement('div');
        var divIdName = 'my'+num+'Div';
        newdiv.setAttribute('id',divIdName);
        newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeTitle("'+divIdName+'")\'>Remove the div "'+divIdName+'"</a>';
        ni.appendChild(newdiv);
*/
	}

/*
	function removeTitle(divNum) {
        	var d = document.getElementById('mainPageDiv');
        	var olddiv = document.getElementById(divNum);
        	d.removeChild(olddiv);
    	}
*/	
</script>
 <body class="tundra">  <!-- Inline declaration for programmatically created items  --><div dojoType="dijit.Declaration" widgetClass="obj.NewItem">
    <div dojoType="dijit.layout.LayoutContainer" dojoAttachPoint="container">
	<div dojoType="dijit.form.Button" onClick=MoveItemDown>
            <!-- Move Down<br><br> -->
        </div>        
	<div dojoType="dijit.form.Button" onClick=RemoveItem>
            Remove<br><br>
        </div>
    </div>
</div>         <!-- main section with tree, table, and preview -->

<div dojoType="dijit.layout.SplitContainer" orientation="vertical" style="height:100%" layoutAlign="client" sizerWidth="7">
 
    <div id="Div1" dojoType="dijit.layout.ContentPane" title="Inbox" style="padding:8px;" layoutAlign="left">
	    <h1>Title</h1>
    </div>
 
<div dojoType="dijit.layout.SplitContainer" orientation="horizontal" style="height:100%" layoutAlign="client" sizerWidth="7">

	<div dojoType="dijit.layout.SplitContainer" orientation="vertical"  style="width:100px" layoutAlign="client" sizerWidth="7">	
	    <div id="Div2" dojoType="dijit.layout.ContentPane" title="Inbox" style="padding:8px;" layoutAlign="left">
				<h1>Side Bar</h1>
				<br>
				<button dojoType="dijit.form.Button" onClick="AddItem()">Title</button>
	
		</div>
	</div>
	
	<div dojoType="dijit.layout.SplitContainer" orientation="vertical"  layoutAlign="client" sizerWidth="7">
	    <div id="mainContent" dojoType="dijit.layout.LayoutContainer" title="mainContent" jsId="mainContent" orientation="vertical">
		<h1>Main Page 1</h1>
		<br><br>
		</div>
		<div id="inbox" dojoType="dijit.layout.ContentPane" title="Inbox" style="padding:8px;" layoutAlign="left">
				<h1>Main Page  1</h1>
				
				<input type="hidden" value="0" id="theValue" />
				<div id="mainPageDiv"> </div>
				
                <!-- <div dojoType="mail.newMessage" id="myNewMessage"></div> -->
		</div>
		
	</div>

</div></div>  </body></html>
